/* 
    Document   : style
    Created on : Nov 11, 2011, 12:12:24 AM
    Author     : 91195
    Description:
        Purpose of the stylesheet follows.
*/

/* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

#page_wrap{
    background-color: #e3e3e3;
    width: 670px;
    margin: auto;
    border: 2px solid;    
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
}

#page_wrap img{
    width: 650px;
    margin: 10px 25px 20px 10px; 
}

#navigation{
    text-align: center;
    height: 40px;
}

.nav_btn {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    text-decoration: none;
    color: #ffffff;
    padding: 10px 20px;
    margin: 10px 10px 0px 10px;
    background: -moz-linear-gradient(
        top,
        #42ff42 0%,
        #146600);
    background: -webkit-gradient(
        linear, left top, left bottom, 
        from(#42ff42),
        to(#146600));
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border: 1px solid #134201;
    -moz-box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 2px rgba(255,255,255,1);
    -webkit-box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 2px rgba(255,255,255,1);
    text-shadow:
        0px -1px 0px rgba(000,000,000,0.4),
        0px 1px 0px rgba(255,255,255,0.3);
}
a:hover{
    color:#000;
}

.end_msg{
    border: 1px solid;
    margin: 20px auto;
    padding: 15px 20px 15px 55px;
    width: 500px;
    font: bold 12px verdana;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
    text-shadow: 2px 2px 2px #ccc;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    color: #9F6000;
    background: #FEEFB3 url('icon-tick.png') no-repeat 10px center;
}

#all_chars {
    width: 190px;
    height: 200px;
    margin: 0px 10px 10x 10px;
    padding: 10px;
}


.char_box {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #EEEEEE;
    width: 60px;
    height: 100px;
    float: left;
    border: 1px solid #EEEEEE;
    text-align: center;

    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -o-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);

    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    transition-duration: 0.5s;
}


.char_box:hover {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);

    -webkit-box-shadow: 0px 0px 40px #ccc;
    -moz-box-shadow: 0px 0px 40px #ccc;
    box-shadow: 0px 0px 40px #ccc;
}
